<template>
  <div class="hello">
    <!-- 初始化echarts -->
    <div ref="mapbox" style="height:400px;width:600px">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
// const option={
//   xAxis:{
//     type:'category',
//     data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
//   },
//   yAxis:{
//     type:'value'
//   },
//   series:[{
//     data:[820,932,901,1290,1330,1320],
//     type:'line'
//   }]
// }
// 注册地图组件
const option={
  title:{
    text:"疫情地图",
    link:"https://baidu.com",
    subtext:"中国加油",
    sublink:"https://baidu.com"
  },
  series:[{
    name:"确诊人数",
    //告诉echarts需要渲染的是地图组件
    type:'map', 
    //告诉echarts需要渲染的是中国地图
    map:'china',
    label:{
      // 控制对应地区的汉字
      show:true,
      // 控制地区的字体颜色
      color:'#333',
      fontSize:10
    },
    itemStyle:{
      // 地图板块的颜色和边框
      areaColor:'#eee',
      borderColor:'blue'
    },
    // 控制地图的放大和缩小
    roam:true,
    zoom:1.2,
    emphasis:{
      // 控制鼠标滑过的背景色和字体颜色
      label:{
        color:'#fff',
        fontSize:12
      },
      itemStyle:{
        areaColor:'#83b5e7'
      }
    },
    // 展示后台数据 {name:XXX,value:XXX}
    data:[]

  }],
  visualMap:[{
    type:'piecewise',
    show:true,
    // splitNumber:4,
    pieces:[
      // 分段
      {min:10000},
      {min:1000,max:9999},
      {min:100,max:999},
      {min:10,max:99},
      {min:1,max:9}
      ],
      // align:'right'   // 默认left
      // orient:'horizontial'  //默认竖直
      // left right 属性控制 分段的位置
      // showLabel:false
      // textStyle:{}
      inRange:{
        symbol:'rect',
        color:['#ffc0b1','#9c0505']
      },
      itemWidth:20,
      itemHeight:10
  }],
  tooltip:{
    trigger:'item'
  },
  toolbox:{
    show:true,
    orient:'vertical',
    left:'right',
    top:'center',
    feature:{
      // dataView:{readOnly:false},
      // restore:{},
      saveAsImage:{}
    }
  },
}

export default {
  name: 'HelloWorld',
  mounted(){
    // getData 需要echarts初始化
    this.getData();
    this.mychart=echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option)
  },
  methods:{
    getData(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{},(err,data)=>{
        if(!err){
          // 代表数据请求成功
          console.log(data)
          let list=data.data.list.map(item=>({name:item.name,value:item.value}))
          option.series[0].data=list;
          // 这条代码能执行的前提是 DOM 已经渲染完成，只有 DOM渲染完成后才能执行 echarts初始化
          this.mychart.setOption(option);
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
